<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      title="设置高度"
      width="500px"
      @close="close"
    >
      <div class="content">
        <el-input type="number" v-model="height" max="500" min="60" placeholder="请输入60-500的数" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="submit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      height: 0,
      resolve: null,
      reject: null,
      // 状态
      loading: false,
      dialogVisible: null,
    }
  },
  mounted() {
  },
  methods: {
    open(height) {
      this.height = height
      this.show();
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    show() {
      this.dialogVisible = true;
    },

    close() {
      this.loading = false;
    },
    hide() {
      this.resolve = null;
      this.reject = null;
      this.dialogVisible = false;
    },
    submit() {
      if (this.height < 60 || this.height > 500) return this.$message({ message: '请输入60-500的数', type: 'warning'});
      this.resolve(this.height)
      this.hide()
    },
  }
}
</script>
